<!DOCTYPE html>
<html>

<head></head>
<!--组件和组件嵌套-->
<body>
    <div id="mainscreen">
        {{message}}
        <brook-cmp :parent="message">
        </brook-cmp>
        <brook-list v-for="label in labels" :title=label @fire2parent="callMy001"></brook-list>
    </div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript">
    // 先定义组件
    // 再初始化根Vue实例，否则会报错误
    // 组件的data必须是一个函数，而不能是静态数据，因为组件要复用，所以必须维护data的独立拷贝
    let brookList = Vue.component("brook-list", {
        // 通过prop属性向子组件传递数据
        props: ["title"],
        data: function () {
            return {
                innertitle: this.title
            };
        },
        template: `<h5><button @click="innertitle=123">{{innertitle}}</button></h5>`
    });
    let brookCmp = Vue.component("brook-cmp", {
        props: ["parent"],
        data: function () {
            return {
                text: this.parent
            };
        },
        template: "<div>{{text}}<brook-cmp2/></div>"
    });
    // 组件可以嵌套
    // 上面就是一个例子
    let brookCmp2 = Vue.component("brook-cmp2", {
        data: function () {
            return {
                text: "grandson"
            };
        },
        template: "<div>{{text}}</div>"
    });
    let vmInst = new Vue({
        el: "#mainscreen",
        data: {
            message: "hello world",
            labels: ["H101", "H201", "H301"]
        },
        methods: {
            callMy001: function () {
                console.log("");
            }
        },
    });

</script>

</html>